<template>
  <!-- Layer -->
   <el-form  ref="form" size='small'>
      <h4>地图</h4>
  <el-row :gutter="10" type="flex" align="middle">
    <el-col :span="6"> 鼠标经度 </el-col>
    <el-col :span="17">
     <el-input v-model="textStyle" placeholder="Regular" />
    </el-col>
  </el-row>
    <el-row :gutter="10" type="flex" align="middle">
    <el-col :span="6"> 鼠标纬度 </el-col>
    <el-col :span="17">
     <el-input v-model="textStyle" placeholder="Regular" />
    </el-col>
  </el-row>
  <el-row :gutter="10" type="flex" align="middle">
    <el-col :span="6"> 投影坐标 </el-col>
    <el-col :span="17">
     <el-input v-model="textStyle" placeholder="Regular" />
    </el-col>
  </el-row>
    <el-row :gutter="10" type="flex" align="middle">
    <el-col :span="6"> 比例尺 </el-col>
    <el-col :span="17">
     <el-input v-model="textStyle" placeholder="Regular" />
    </el-col>
  </el-row>
      <el-divider></el-divider>
  <h4>Layer</h4>
  <el-row :gutter="10" type="flex" align="middle">
    <el-col :span="6"> 选项 </el-col>
    <el-col :span="17">
      <el-slider v-model="opacity" :min="0" :max="100" :step="1" size='small'>
      </el-slider>
    </el-col>
  </el-row>
  <el-row :gutter="10" type="flex" align="middle">
    <el-col :span="6"> 选项 </el-col>
    <el-col :span="17">
      <el-input v-model="textStyle" placeholder="Regular">
      </el-input>
    </el-col>
  </el-row>
  <el-row :gutter="10" type="flex" align="middle">
    <el-col :span="6"> 选项 </el-col>
    <el-col :span="17">
      <el-input v-model="textStyle" placeholder="Regular">
      </el-input>
    </el-col>
  </el-row>
  <el-divider></el-divider>
  <!-- Icon -->
  <h4>Icon</h4>
  <el-row :gutter="10" type="flex" align="middle">
    <el-col :span="6"> 选项 </el-col>
    <el-col :span="17">
      <div class="image-box el-input__inner">
        <svg-icon
          v-for="(item, index) in input"
          @click="handleChange"
          class-name="iconfont"
          :icon-class="item"
        />
      </div>
    </el-col>
  </el-row>
  <el-row :gutter="10" type="flex" align="middle">
    <el-col :span="6"> 选项 </el-col>
    <el-col :span="17">
      <el-input v-model="textStyle" placeholder="px">
      </el-input>
    </el-col>
  </el-row>
  <el-divider></el-divider>
  <!-- Text -->
  <h4>Text</h4>
  <el-row :gutter="10" type="flex" align="middle">
    <el-col :span="6"> 选项 </el-col>
    <el-col :span="17">
      <el-select v-model="value" placeholder="Select">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-col>
  </el-row>
  <el-row :gutter="10" type="flex" align="middle">
    <el-col :span="6"> 选项 </el-col>
    <el-col :span="17">
      <el-select v-model="value" placeholder="Select">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-col>
  </el-row>
  <el-row :gutter="10" type="flex" align="middle">
    <el-col :span="6"> 选项 </el-col>
    <el-col :span="17">
      <el-slider v-model="textSize" :min="0" :max="100" :step="1" size='small'>
      </el-slider>
    </el-col>
  </el-row>
  <el-row :gutter="10" type="flex" align="middle">
    <el-col :span="6"> 选项 </el-col>
    <el-col :span="17">
      <el-radio-group v-model="textJustify">
        <el-radio-button label="left"></el-radio-button>
        <el-radio-button label="center"></el-radio-button>
        <el-radio-button label="right"></el-radio-button>
      </el-radio-group>
    </el-col>
  </el-row>
  <el-divider></el-divider>
  <!-- Fill -->
  <h4>Fill</h4>
  <el-row :gutter="10" type="flex" align="middle">
    <el-col :span="6"> 选项 </el-col>
    <el-col :span="12">      <el-input v-model="opacity" /> </el-col>
    <el-col :span="6">
      <el-color-picker v-model="outlineColor">
        
      </el-color-picker>
    </el-col>
  </el-row>
  <el-row :gutter="10" type="flex" align="middle">
    <el-col :span="6"> 选项 </el-col>
    <el-col :span="17">
      <el-input v-model="textStyle" placeholder="px">
      </el-input>
    </el-col>
  </el-row>
  <el-row :gutter="10" type="flex" align="middle">
    <el-col :span="6"> 选项 </el-col>
    <el-col :span="17">
      <el-input v-model="textStyle" placeholder="px">
      </el-input>
    </el-col>
  </el-row>
  <el-divider></el-divider>
  <!-- Outline -->
  <h4>Outline</h4>
  <el-row :gutter="10" type="flex" align="middle">
    <el-col :span="6"> 选项 </el-col>
    <el-col :span="12">      <el-input v-model="opacity" /></el-col>
    <el-col :span="6">
      <el-color-picker v-model="outlineColor">
      </el-color-picker>
    </el-col>
  </el-row>
  <el-row :gutter="10" type="flex" align="middle">
    <el-col :span="6"> 选项 </el-col>
    <el-col :span="17">
      <el-input v-model="textStyle" placeholder="px">
      </el-input>
    </el-col>
  </el-row>
  <el-row :gutter="10" type="flex" align="middle">
    <el-col :span="6"> 选项 </el-col>
    <el-col :span="17">
      <el-input v-model="textStyle" placeholder="px">
      
      </el-input>
    </el-col>
  </el-row>
   </el-form>
</template>

<script setup>
const visibility = ref(false);
const visualization = ref(false);
const opacity = ref(50);
const icon = ref("None");
const imageSize = ref(1);
const textField = ref("name");
const textFont = ref("Cabin");
const textStyle = ref("Regular");
const textSize = ref(12);
const textJustify = ref("left");
const fillColor = ref("#6F288A");
const fillOpacity = ref(100);
const outlineWidth = ref(0);
const outlineColor = ref("#000000");
const iconOutlineWidth = ref(0);
const iconOutlineColor = ref("#000000");
const input = ref(["juleifenbu", "juleifenbu", "juleifenbu"]);

const value = ref("");

const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
const handleChange = () => {
  alert("点击了");
};
</script>

<style lang='scss' scoped>
.el-col{
  font-size: 12px;
}
.box-card {
  width: 400px;
}
h4 {
  margin: 10px 0;
  font-weight: bold;
}
:deep(.el-tabs__header) {
  margin: 0 !important;
}
.el-col {
  margin-bottom: 10px;
}
.el-divider--horizontal{
    margin: 5px;
}
.image-box {
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 4px;
  background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
  background-image: none;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
    inset;
  padding: 1px 11px;
  transition: var(--el-transition-box-shadow);
  --el-input-inner-height: calc(var(--el-input-height, 32px) - 2px);
  background: none;
  border: none;
  color: var(--el-input-text-color, var(--el-text-color-regular));
  height: var(--el-input-inner-height);
  outline: none;
  width: 100%;
  display: flex;
  align-items: center;
}
</style>